<template>
	<view style="width: 100%;height: 100%; ">
		<!-- 头部 -->
		<view class="theme-container">
			<!-- 补位 
			<view :style="{height: sConf.tH+'px'}"></view>-->
			<!-- 轮播 -->
			<tn-swiper v-model="curImage" :data="banner" autoplay width="100%" height="360" style="border-radius: 5px;">
				<template #default="{ data }">
					<view class="swiper-data">
						<image class="image" :src="sConf.pics + data" mode="scaleToFill" />
					</view>
				</template>
			</tn-swiper>
			<!-- 定位 
			<view class="">
				<tn-icon name="location" size="40" color="#fff" @click="EventLoadCity"></tn-icon>
				<view class="">{{curCity[0] +' '+ curCity[1]}} </view>
			</view>
			-->
			<!-- 横幅 -->
			<view class="card ocean"
				style="padding: 15px; border-radius: 10px;margin: 10px;display: flex;gap: 10px;align-items: center;">
				<tn-icon name="map" size="96"></tn-icon>
				<view class="" style="display: flex;flex-direction: column;">
					<view class="top-font-title" style="font-size: x-large;">悦玺同城</view>
					<div class="card-ider"></div>
					<view class="">Special Local</view>
				</view>
			</view>
		</view>

		<scroll-view scroll-y class="mainScrollView" style="height: 70vh;padding: 10px;">
			<uni-grid :column="3" :highlight="true" :showBorder="false" :square="false">
				<uni-grid-item v-for="(item,index) in localData" :key="index" :index="index">
					<sub-local-card :data="item" @EventChange="EventChange"></sub-local-card>
				</uni-grid-item>
			</uni-grid>
			<tn-empty v-if="localData.length === 0" mode="list"></tn-empty>
		</scroll-view>


		<!-- 顶部自定义导航 -->
		<tn-navbar :placeholder="true" fixed bg-color="#FFFFFF00" text-color="#fff">
			<tn-search-box v-model="curSearch" placeholder="请输入搜索内容" shape="square" :border="false"
				:search-button="false" size="sm"
				style="background-color: #f1f1f1;width: 100%;border-radius: 10px;margin: 0 5px;" /></tn-navbar>
	</view>

	<!-- popup弹窗 -->
	<tn-popup v-model="showPopup" open-direction="bottom">
		<view class="" style="padding: 10px;">
			<view class="card ocean" style="display: flex;align-items: center;gap: 10px;">
				<tn-avatar :url="sConf.pics + curData?.icon" size="128" bg-color="#ffffff33"></tn-avatar>
				<view class="top-font-title" style="font-size: large;">{{curData?.name}}</view>
			</view>
			<!-- 过滤 -->
			<view style="display: flex;justify-content: space-between;align-items: center;padding: 0 10px;">
				<view style="color:#888;display: flex;align-items: center;gap: 30px;">
					<view :class="{'action':filter===0}" @click="sortChange(0)">综合</view>
					<view :class="{'action':filter===1}" @click="sortChange(1)">销量</view>
					<view :class="{'action':filter===2}" @click="sortChange(2)">新品</view>
					<view style="display: flex;align-items: center;" @click="sortChange(3)">
						<view :class="{'action':filter===3}"> 价格 </view>
						<view style="display: flex;flex-direction: column;">
							<tn-icon name="up-triangle" offset-top="15"
								:color="filter===3&&sort?'#00b09b':'#888'"></tn-icon>
							<tn-icon name="down-triangle" offset-top="-10"
								:color="filter===3&&!sort?'#00b09b':'#888'"></tn-icon>
						</view>
					</view>
				</view>
				<view style="padding: 0 5px;" @click="()=>{this.line=!this.line}">
					<tn-icon v-if="line" name="menu-list"></tn-icon>
					<tn-icon v-else name="menu-more"></tn-icon>
				</view>
			</view>
			<!-- 滚动箱 -->
			<scroll-view scroll-y style="height: 60vh;">
				<sub-product-card v-for="(item,index) in curData?.child" :key="index" :data="item" :line="line" cart
					@puctPlay="EventNavProduct"></sub-product-card>
				<tn-empty v-if="!curData || curData.child.length === 0" mode="list"></tn-empty>
			</scroll-view>
		</view>
	</tn-popup>
</template>

<script>
	import utils from '@/common/utils';
	export default {
		data() {
			return {
				title: ' • 地方专区',
				sConf: getApp().globalData,
				curImage: 0,
				banner: [], // 轮播图数组
				curSearch: '', // 搜索关键字
				curCity: ['全国通用', '全国通用', '全国通用'],
				curData: null, // 当前选择
				filter: 0, // 过滤
				sort: false, // 排序
				line: true, // 行显
				localData: [], // 地方专场
				showPopup: false, // 弹窗开关
			}
		},
		onLoad() {
			this.loadBannerImages();
			this.LoadLocalList();
			this.EventLoadCity();
			console.log('====================');
		},
		onReady() {
			console.log('onReady');
		},
		methods: {
			/**
			 * 加载轮播图
			 */
			loadBannerImages() {
				utils.httpRequestOnList(this.sConf.host + '/api/image/', {
					mode: 'swiper',
					cur: 0,
					status: 1,
					ordering: '-sort'
				}).then((res) => {
					console.log('加载轮播——页面0');
					let tmpData = []
					res.forEach(item => {
						tmpData.push(item.url)
					})
					this.banner = tmpData
				})
			},
			/**
			 * 加载地方专区
			 */
			LoadLocalList() {
				let host = this.sConf.host + '/weapps/local/';
				let token = this.sConf.token || ''
				let data = {
					ordering: '-id'
				}
				utils.authenticatorOnList(host, token, data).then(res => {
					console.log('加载地方专区', res);
					this.localData = res
				});
			},
			/**
			 * 过滤条件
			 */
			sortChange(e) {
				console.log('过滤条件', e);
				if (e < 3) {
					this.filter = e
				} else {
					if (this.filter === 3) {
						this.sort = !this.sort
					} else {
						this.filter = 3
					}
				}
			},
			/**
			 * 请求位置
			 */
			EventLoadCity() {
				this.curCity = [this.sConf.city?.province || null, this.sConf.city?.city || null, this.sConf.city
					?.district || null
				]
				console.log('curCity->', this.curCity);
			},
			/**
			 * 选择事件
			 */
			EventChange(e) {
				console.log('EventChange', e);
				this.curData = this.filterData(e);
				this.showPopup = !this.showPopup;
			},
			/**
			 * 导航到商品页
			 */
			EventNavProduct(e) {
				uni.navigateTo({
					url: '/pagec/product/product?gid=' + e
				});
			},
			/**
			 * 过滤对象
			 */
			filterData(e) {
				return this.localData.find(item => item.id === e)
			},

		}
	}
</script>

<style lang="scss" scoped>
	/* banner */
	.swiper-data {
		width: 100%;
		height: 100%;
		border-radius: 5px;

		.image {
			width: 100%;
			height: 100%;
			border-radius: inherit;
		}
	}

	/* 选中项目 */
	.action {
		color: $uni-color-banner;
	}

	/* 横线 */
	.card-ider {
		width: 160px;
		height: 4px;
		background: rgba(255, 255, 255, 0.5);
		margin: 10px 0;
	}
</style>